<template>
  <div class="base-info">
	<el-row>
		<el-col :span="4">
			<el-image :src="baseInfo.coverImgUrl"></el-image>
		</el-col>
		<el-col :span="20" style="padding-left:30px;">
			<div class="base-one">
				<div class="base-one-left">
					<span class="base-one-left-title">歌单</span>
					<div style="margin-left: 10px;font-weight: 700;">{{baseInfo.name}}</div>
				</div>
				<div class="base-one-right">
					<div style="margin-right: 10px;">歌曲数<div>{{baseInfo.trackCount}}</div></div>
					<div>播放数<div>{{baseInfo.playCount}}</div></div>
				</div>
			</div>
			<div class="base-two padding-item">
				<!-- <el-image :src="baseInfo.creator.avatarUrl"></el-image> -->
				<!-- <div>{{baseInfo.creator.nickname}}</div> -->
				<div><span>创建时间:</span>{{baseInfo.createTime | formatDate}}</div>
			</div>
			<div class="base-three padding-item">
				<div>
					<i class="iconfont icon-bofang"></i>播放全部</div>
				<div>
					<i class="iconfont icon-shoucang"></i>收藏({{baseInfo.subscribedCount}})</div>
				<div>
					<i class="iconfont icon-fenxiang"></i>分享({{baseInfo.shareCount}})</div>
			</div>
			<div class="base-four padding-item">
				<div>标签: <span>{{baseInfo.tags[0]}}/{{baseInfo.tags[1]}}/{{baseInfo.tags[2]}}</span></div>
				<div>简介: {{baseInfo.description}}</div>
			</div>
		</el-col>
	</el-row>
  </div>
</template>

<script>
	import {formatDate} from 'utils/data'
export default {
  name:'BaseInfo',
  props:['baseInfo'],
  data(){
    return{
      
    }
  },
  methods:{
  
  },
   filters: {
     formatDate(time) {
       if (time === null) {
         return "无";
       } else {
         let date = new Date(time);
         return formatDate(date, "yyyy-MM-dd");
       }
     },
	}
}
</script>

<style lang="less" scoped>
  .base-info{
	  width: 100%;
	  height: 200px;
	  padding: 10px 0;
	    overflow: hidden;
	  .base-one{
		  height: 30px;
		  line-height: 30px;
		  display: flex;
		  justify-content: space-between;
		  .base-one-left{
			  display: flex;
			    line-height: 30px;
			  .base-one-left-title{
				  font-size: 14px;
				  display: inline-block;
	              width:50px;
				  text-align: center;
				  color: red;
				  border: 1px solid red;
			  }
		  }
		  .base-one-right{
			  display: flex;
			  font-size: 14px;
			  line-height: 16px;
		  }
	  }
	  .base-two{
		  display: flex;
		  font-size: 14px;
		  div{
			  margin-right: 20px;
		  }
	  }
	  .base-three{
		  display: flex;
		
		 div{
			 width: 150px;
			 height: 40px;
			 line-height: 40px;
			 text-align: center;
			 font-size: 14px;
			 border-radius: 10px;
			 border:1px solid #e8eaec;
			 margin-right: 10px;
			 i{
				 margin-right: 10px;
			 }
		 }
	  }
	  .base-four{
	  	  font-size: 14px;
		  
	  }
  }
  .base-three div:nth-child(1){
  		background-color: #e83c3c;
  		color: #fff;
  }
  .base-four div:nth-child(1) span{
	  color: var(--tag-color);
  }
  .padding-item {
	  padding: 5px 0;
  }
</style>
